<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <div id="container"></div>

  <script>
    function b() {
      console.log('b');
    }
    debugger
    console.log(1);
    function a() {
      b()
      console.log('a');
    }
    console.log(2);
    a()
  </script>

  <script>
    // // 修改 DOM
    // const p1 = document.createElement('p')
    // const p2 = document.createElement('p')
    // const p3 = document.createElement('p')
    // p1.innerHTML = '一段文字'
    // p2.innerHTML = '一段文字'
    // p3.innerHTML = '一段文字'
    // const container = document.querySelector('#container')
    // container.appendChild(p1)
    // container.appendChild(p2)
    // container.appendChild(p3)
    // // 微任务：DOM 渲染之前执行
    // // new Promise((resolve, reject) => {
    // //   resolve()
    // // })
    // Promise.resolve()
    //   .then(() => {
    //     alert(`执行了微任务 micro task`);
    //   });
    // // 宏任务：DOM 渲染之后执行
    // setTimeout(() => {    
    //   alert(`执行了宏任务 macro task`);
    // });
  </script>
  
  <script>
    // 闭包最简单的形式
    // function outer() {
    //   debugger
    //   var a = 1
    //   function inner() {
    //     console.log(a)
    //   }
    //   inner()
    // }
    // outer()

    // 闭包作用：使局部变量常驻内存
    // for (var i = 0; i < 10; i++) {
    //   setTimeout(() => {
    //     console.log(i);
    //   }, 1000);
    // }
    // for (var i = 0; i < 10; i++) {
    //   function fn(i) {
    //     setTimeout(() => {
    //       console.log(i);
    //     }, 1000);
    //   }
    //   fn(i)
    // }
    // for (let i = 0; i < 10; i++) {
    //   setTimeout(() => {
    //     console.log(i);
    //   }, 1000);
    // }

    // 原型
    // function Person() {

    // }
    // zhangsan = new Person()
    // console.log(zhangsan.__proto__ === Person.prototype);

    // 原型链
    // class A {}
    // class B extends A {}
    // class C extends B {}
    // d = new C()

    // console.log(d.__proto__ === C.prototype);
    // console.log(C.prototype.__proto__ === B.prototype);
    // console.log(B.prototype.__proto__ === A.prototype);
    // console.log(A.prototype.__proto__ === Object.prototype);
    // console.log(Object.prototype.__proto__ === null);

    // console.log(d.__proto__.__proto__.__proto__.__proto__.__proto__);

    // 继承
    // 1. 对象冒充继承
    // function Person(age) {
    //   this.age = age
    // }
    // function Student(age) {
    //   // 对象冒充继承
    //   Person.call(this, age)
    //   console.log(this.age)
    // }
    // Student(18)
    // 2. 原型链继承
    // function Person() {}
    // Person.prototype.a = 1
    // function Student() {}

    // Student.prototype.__proto__ = Person.prototype
  
    // console.log(Student.prototype.a);

    // 类继承
    // class Person {}
    // class Student extends Person {
    //   constructor() {
    //     super()
    //   }
    // }
    // console.log(Student.prototype.__proto__ === Person.prototype);
    // function born(callback) {
    //   setTimeout(() => {
    //     callback('出生')
    //   }, 500)
    // }
    // function learn(callback) {
    //   setTimeout(() => {
    //     callback('上学')
    //   }, 500)
    // }
    // function work(callback) {
    //   setTimeout(() => {
    //     callback('工作')
    //   }, 500)
    // }
    // function marry(callback) {
    //   setTimeout(() => {
    //     callback('结婚')
    //   }, 500)
    // }
    // function die(callback) {
    //   setTimeout(() => {
    //     callback('挂了')
    //   }, 500)
    // }
    // 回调
    // born(function(born) {
    //   console.log(born)
    //   learn(function(learn) {
    //     console.log(learn)
    //     work(function(work) {
    //       console.log(work)
    //       marry(function(marry) {
    //         console.log(marry)
    //         die(function(die) {
    //           console.log(die)
    //         })
    //       })
    //     })
    //   })
    // })
    // 使用 promise
    // function born() {
    //   return new Promise((resolve, reject) => {
    //     setTimeout(() => {
    //       resolve('出生')
    //     }, 500)
    //   })
    // }
    // function learn() {
    //   return new Promise((resolve, reject) => {
    //     setTimeout(() => {
    //       resolve('上学')
    //     }, 500)
    //   })
    // }
    // function work() {
    //   return new Promise((resolve, reject) => {
    //     setTimeout(() => {
    //       resolve('工作')
    //     }, 500)
    //   })
    // }
    // function marry() {
    //   return new Promise((resolve, reject) => {
    //     setTimeout(() => {
    //       resolve('结婚')
    //     }, 500)
    //   })
    // }
    // function die() {
    //   return new Promise((resolve, reject) => {
    //     setTimeout(() => {
    //       resolve('挂了')
    //     }, 500)
    //   })
    // }
    // born().then(res => {
    //   console.log(res)
    //   return learn()
    // }).then(res => {
    //   console.log(res)
    //   return work()
    // }).then(res => {
    //   console.log(res)
    //   return marry()
    // }).then(res => {
    //   console.log(res)
    //   return die()
    // }).then(res => {
    //   console.log(res)
    // })
    // async/await
    // async function initLife() {
    //   const born1 = await born()
    //   console.log(born1);
    //   const learn1 = await learn()
    //   console.log(learn1);
    //   const work1 = await work()
    //   console.log(work1);
    //   const marry1 = await marry()
    //   console.log(marry1);
    //   const die1 = await die()
    //   console.log(die1);
    // }
    // initLife()
    
  </script>
</body>
</html>